<template>
    <div class="securityCenter">
        <Back title="安全中心" />
        <div>
            <Bg>
                <van-cell title="修改密码" is-link @click="showPopup" />
                <van-cell title="注销账号" is-link @click="destroyAccount" />
                <van-button
                    type="primary"
                    block
                    round
                    @click="logout"
                    class="tuichy"
                    >退出登录</van-button
                >
            </Bg>
        </div>
        <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '50%' }"
            closeable
        >
            <p class="p3">修改密码</p>
            <!-- 注册表单 -->
            <van-form @submit="updatePassword">
                <van-field
                    v-model="old.oldPassword"
                    :type="old.isShow ? 'text' : 'password'"
                    name="旧密码"
                    label="旧密码"
                    placeholder="旧密码"
                    :right-icon="old.isShow ? 'eye-o' : 'closed-eye'"
                    @click-right-icon="showPassword(false)"
                    autocomplete="off"
                    :rules="[
                        {
                            required: true,
                            message: '必须以字母开头,6-16位字母数字下划线组合',
                            pattern: passwordReg,
                        },
                    ]"
                />
                <van-field
                    v-model="now.password"
                    :type="now.isShow ? 'text' : 'password'"
                    name="新密码"
                    label="新密码"
                    placeholder="新密码"
                    :right-icon="now.isShow ? 'eye-o' : 'closed-eye'"
                    @click-right-icon="showPassword(true)"
                    autocomplete="off"
                    :rules="[
                        {
                            required: true,
                            message: '必须以字母开头,6-16位字母数字下划线组合',
                            pattern: passwordReg,
                        },
                    ]"
                />

                <!-- 提交按钮 -->
                <div class="button-box">
                    <van-button
                        round
                        block
                        type="info"
                        native-type="submit"
                        color="#e99036"
                        >提交</van-button
                    >
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script>
// 导入公共组件
import Back from "../components/Back.vue";
import Bg from "../components/Bg.vue";
import { Toast } from 'vant';
import { Dialog } from 'vant';

export default {
    name: 'SecurityCenter',
    components: {
        Back,
        Bg
    },

    data() {
        return {

            old: {
                // 旧密码
                oldPassword: '',
                //是否 明文显示 旧密码
                isShow: false
            },


            now: {
                // 新密码
                password: '',
                //是否 明文显示 新密码
                isShow: false
            },


            // 是否展示 弹出层
            show: false,
            // 密码正则(必须以字母开头, 字母数字_组合[6-16])
            passwordReg: /^[A-Za-z]\w{5,15}$/,
        }
    },
    methods: {
        // 展示 注册弹出层
        showPopup() {
            this.show = true;
        },
        //切换明文 
        showPassword(tf) {
            if (tf) {
                this.now.isShow = !this.now.isShow;
            } else {
                this.old.isShow = !this.old.isShow;
            }
        },

        // 注销账号
        destroyAccount() {
            // 确认提示
            Dialog.confirm({
                title: '注销账号',
                message: '是否确定注销账号，一旦注销无法恢复!',

            }).then(() => {
                // 请求注销
                this.axios({
                    method: 'POST',
                    url: '/destroyAccount',

                }).then((result) => {
                    

                    // 登录token参数错误（未登录）
                    if (result.data.code === 700) {
                        Toast.success(result.data.msg);
                        this.$router.push({ name: "Logon" })
                    }

                    // 注销成功
                    if (result.data.code === 'G001') {
                        Toast.success(result.data.msg);
                        setTimeout(() => {
                            this.$router.push({ name: "Logon" })
                        }, 1500);
                    }

                }).catch((err) => {
                    
                });

            }).catch(() => { });
        },
        // 退出登录
        logout() {
            // 退出提示
            Dialog.confirm({
                title: '确定退出登录？',
            }).then(() => {
                // 请求退出
                this.axios({
                    method: 'POST',
                    url: '/logout',
                }).then((result) => {
                    

                    // 退出成功
                    if (result.data.code === 'F001') {
                        Toast.success(result.data.msg);
                        setTimeout(() => {
                            this.$router.push({ name: "Logon" })
                        }, 1500);
                    }

                }).catch((err) => {
                    
                });
            }).catch(() => { });
        },
        //修改密码
        updatePassword() {
            // 判断两个密码
            if (this.old.oldPassword === this.now.password) {
                Toast.fail('新旧密码不能相同');
            }
            else {
                // 请求修改
                this.axios({
                    method: 'POST',
                    url: '/updatePassword',
                    data: {
                        oldPassword: this.old.oldPassword,
                        password: this.now.password
                    }
                }).then((result) => {
                    

                    // 修改成功
                    if (result.data.code === 'E001') {
                        Toast.success(result.data.msg);
                        // 延迟跳转，看提示动画
                        setTimeout(() => {
                            this.$router.push({ name: "Logon" })
                        }, 1500);
                    }
                    // 旧密码不正确
                    else if (result.data.code === 'E003') {
                        Toast({
                            icon: 'cross',
                            message: result.data.msg
                        });
                        setTimeout(() => {
                            this.old.oldPassword = '';
                        }, 500);
                    }

                }).catch((err) => {
                    
                });
            }
        }
    },
}
</script>

<style lang="less" scoped>
.securityCenter {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f7f7f7;

    .tuichy {
        position: absolute;
        top: 240px;
    }
    /deep/ .bg-cont {
        padding: 13px 0;
    }
    /deep/ .bg-cont::after {
        content: '';
        display: block;

        width: 100%;
        height: 2px;
        background-color: #fff;
        transform: translateY(-2px);
    }
    /deep/ .van-button--primary {
        background-color: red;
        border-color: red;
    }

    /deep/ .van-popup {
        .p3 {
            margin-top: 15px;
            margin-bottom: 50px;
            padding-left: 15px;
            font-size: 22px;
        }

        .van-form {
            padding: 0;
        }

        .button-box {
            margin: 50px 0 15px;
            padding: 0 15px;
        }
    }
}
</style>